<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
  <script src='../editor/lib/jquery.js'></script>
  <script type='text/javascript' src='../editor/src/browser.js'></script>
  <script type='text/javascript' src='../editor/src/math.js'></script>
  <script type='text/javascript' src='../editor/src/svgutils.js'></script>
  <script type='text/javascript' src='../editor/src/select.js'></script>
  <script type='text/javascript' src='qunit/qunit.js'></script>
  <script type='text/javascript'>
  $(function() {
  	// log function
  	QUnit.log = function(result, message) {
		if (window.console && window.console.log) {
			window.console.log(result +' :: '+ message);
		}
	};

	module('svgedit.select');

	var svgns = 'http://www.w3.org/2000/svg';
	var sandbox = document.getElementById('sandbox');
	var svgroot;
	var svgcontent;
	var rect;
	var mockConfig = {
		dimensions: [640,480]
	};
	var mockFactory = {
		createSVGElement: function(jsonMap) {
			var elem = document.createElementNS(svgns, jsonMap['element']);
			for (var attr in jsonMap['attr']) {
				elem.setAttribute(attr, jsonMap['attr'][attr]);
			}
			return elem;
		},
		svgRoot: function() { return svgroot; },
		svgContent: function() { return svgcontent; }
	};

    function setUp() {
		svgroot = mockFactory.createSVGElement({
			'element': 'svg',
			'attr': {'id': 'svgroot'}
		});
		svgcontent = svgroot.appendChild(
			mockFactory.createSVGElement({
				'element': 'svg',
				'attr': {'id': 'svgcontent'}
			})
		);
		rect = svgcontent.appendChild(
			mockFactory.createSVGElement({
				'element': 'rect',
				'attr': {
					'id': 'rect',
					'x': '50',
					'y': '75',
					'width': '200',
					'height': '100'
				}
			})
		);
		sandbox.appendChild(svgroot);
	}

	function setUpWithInit() {
		setUp();
		svgedit.select.init(mockConfig, mockFactory);
	}
	
	function tearDown() {
		while (sandbox.hasChildNodes()) {
			sandbox.removeChild(sandbox.firstChild);
		}
	}

	test('Test svgedit.select package', function() {
		expect(10);

		ok(svgedit.select);
		ok(svgedit.select.Selector);
		ok(svgedit.select.SelectorManager);
		ok(svgedit.select.init);
		ok(svgedit.select.getSelectorManager);
		equals(typeof svgedit.select, typeof {});
		equals(typeof svgedit.select.Selector, typeof function(){});
		equals(typeof svgedit.select.SelectorManager, typeof function(){});
		equals(typeof svgedit.select.init, typeof function(){});
		equals(typeof svgedit.select.getSelectorManager, typeof function(){});
	});
	
	test('Test Selector DOM structure', function() {
		expect(26);

		setUp();

		ok(svgroot);
		ok(svgroot.hasChildNodes());

		// Verify non-existence of Selector DOM nodes
		equals(svgroot.childNodes.length, 1);
		equals(svgroot.childNodes.item(0), svgcontent);
		ok(!svgroot.querySelector('#selectorParentGroup'));

		svgedit.select.init(mockConfig, mockFactory);

		equals(svgroot.childNodes.length, 3);

		// Verify existence of canvas background.
		var cb = svgroot.childNodes.item(0);
		ok(cb);
		equals(cb.id, 'canvasBackground');

		ok(svgroot.childNodes.item(1));
		equals(svgroot.childNodes.item(1), svgcontent);

		// Verify existence of selectorParentGroup.
		var spg = svgroot.childNodes.item(2);
		ok(spg);
		equals(svgroot.querySelector('#selectorParentGroup'), spg);
		equals(spg.id, 'selectorParentGroup');
		equals(spg.tagName, 'g');

		// Verify existence of all grip elements.
		ok(spg.querySelector('#selectorGrip_resize_nw'));
		ok(spg.querySelector('#selectorGrip_resize_n'));
		ok(spg.querySelector('#selectorGrip_resize_ne'));
		ok(spg.querySelector('#selectorGrip_resize_e'));
		ok(spg.querySelector('#selectorGrip_resize_se'));
		ok(spg.querySelector('#selectorGrip_resize_s'));
		ok(spg.querySelector('#selectorGrip_resize_sw'));
		ok(spg.querySelector('#selectorGrip_resize_w'));
		ok(spg.querySelector('#selectorGrip_rotate_sw'));
		ok(spg.querySelector('#selectorGrip_rotate_se'));
		ok(spg.querySelector('#selectorGrip_rotate_nw'));
		ok(spg.querySelector('#selectorGrip_rotate_ne'));

		tearDown();
	});

  }); 
  </script>  
</head>  
<body>  
  <h1 id='qunit-header'>Unit Tests for select.js</h1>
  <h2 id='qunit-banner'></h2>
  <h2 id='qunit-userAgent'></h2>
  <ol id='qunit-tests'>
  </ol>
  <div id='sandbox'></div>
</body>  
</html>
